{% extends "users/settings/base.html" %}

{% block settings %}
	{% load static %}
{% endblock %}

{% block title %}
	头像修改
{% endblock %}

{% block edit %}
	<div class="row">
		<div class="col-sm-8 settings-content">
			<form class="form-horizontal" role="form" action="{% url 'users:head-portrait' request.user.id %}" method="post" enctype="multipart/form-data">
				{% csrf_token %}
				<!--用户头像-->
		    <div class="row">
		      <div class="col-xs-4 col-xs-offset-4" onclick="change();" style="cursor:pointer;">
		        {% if user.image %}
		          <img id="image" src="{{ user.image.url }}" alt="头像" class="img-circle img-responsive"/>
		        {% else %}
		          <img id="image" src="{% static 'images/users/settings/sample.jpg' %}" alt="请上传正确的图片格式" class="img-circle img-responsive" />
		        {% endif %}
		        <!--图像上传时的错误-->
		        {% if image_error %}
		          <p class="text-center text-danger small">*{{ image_error }}</p>
		        {% endif %}
		        <input id="file" name="image" type="file" class="hidden" accept="image/gif,image/jpeg,image/jpg,image/png,image/tiff"/>
		      </div>
		    </div>
		    <hr/>
		    <button type="submit" class="btn btn-primary pull-right visible-sm visible-md visible-lg">保存</button>
        <button type="submit" class="btn btn-primary btn-block visible-xs">保存</button>
			</form>
		</div>
	</div>
	<script>
    $(document).ready(function(){
        $('#file').change(function(){
            let picture = this.files[0];
            previewPicture(picture);
        });
    });
    function previewPicture(picture){
        let reader = new FileReader();
        reader.readAsDataURL(picture);
        reader.onload = function(e){
            $('#image').attr('src', this.result).show();
        }
    }
    function change() {
        document.getElementById('file').click();
    }
  </script>
{% endblock %}